<template>
	<div class="app-container">
		<el-row>
			<el-form :model="ruleForm" ref="ruleForm" label-width="100px" label-position="right"
				class="demo-ruleForm el-form-bottom">
				<div>
					<span>直播详情</span>
					<el-divider></el-divider>
				</div>
				<el-col :span="24">
					<el-form-item label="直播介绍">
            <div class="yxkj-word-black" v-html="ruleForm.videoName"></div>
					</el-form-item>
				</el-col>
        <el-col :span="24">
        	<el-form-item label="主播">
        		<div class="yxkj-word-black" v-html="ruleForm.anchorName"></div>
        	</el-form-item>
        </el-col>
        <el-col :span="24">
        	<el-form-item label="主播分类">
        		<div class="yxkj-word-black" v-html="ruleForm.typeName"></div>
        	</el-form-item>
        </el-col>
        <el-col :span="24">
        	<el-form-item label="活动时间" >
        		<div class="yxkj-word-black" v-html="ruleForm.yxkjdate"></div>
        	</el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="直播图片">
            <div class="yxkj-word-black">
            	<img :src="$imagePath + ruleForm.image" class="avatar"/>
            </div>
          </el-form-item>
        </el-col>

				<el-col :span="24">
					<el-form-item label="已选商品">
						<el-table ref="singleTable" :data="multipleSelection1" border tooltip-effect="dark" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
							<el-table-column width="600" show-overflow-tooltip prop="product.name1" label="商品名称">
							</el-table-column>
							<el-table-column prop="product.mallPcPrice" label="商城价格"></el-table-column>
							<el-table-column prop="product.malMobilePrice" label="移动端价格"></el-table-column>
              <el-table-column prop="sort" label="排序"></el-table-column>
              <el-table-column prop="top" label="是否置顶">
                <template slot-scope="scope">
                	{{ codeBox.YES_NO[scope.row.top] }}
                </template>
              </el-table-column>
						</el-table>
					</el-form-item>
				</el-col>
				<el-form-item>
					<div class="fixed-bottom-20">
						<el-button type="success" @click="back">返回</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-row>

	</div>
</template>
<script>
	import {getCodeManager,codeToArray,uploadFileImage} from "@/api/all"
  import {addLiveVideo,editLiveVideo} from "@/api/live"
	import {Message} from 'element-ui'
	import Pagination from '@/components/Pagination'
	export default {
		name: "videoedit",
		components: {
			Pagination
		},
		data() {
			return {
				productList: [], // 商品列表
				total: 0,
				multipleSelection: [],
				multipleSelection1: [], //已选商品
				dialogFormVisible: false,
        anchors: [],  // 主播列表
        types: [],  // 分类列表
				value1: [],
        currentRow: null,
				ruleForm: {
          id:"",
					videoName: "",
					anchorId: "",
					typeId: "",
					yxkjdate: "",
          typeName: "",
          anchorName: "",
          image: "",
					productIds: ""
				},
				listQuery: {
					page: 1,
					limit: 20,
					q_name1: '',
					q_state1: '6',
					q_sellerId: ''
				}
			};
		},
		created() {
      this.ruleForm.id = this.$route.query.id;
      getCodeManager('ACT_SINGLE_TYPE,CHANNEL,PRODUCT_IS_TOP,PRODUCT_STATE', () => {
      }),
      this.getListAll()
		},
		methods: {
      handleCurrentChange(val) {
      	// 选中当前行数据
      	this.currentRow = val
      },
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
      getListAll() {
        addLiveVideo().then(res => {
        	this.anchors = res.data.data.liveAnchors,
        	this.types = res.data.data.liveTypes
        }),
        editLiveVideo({
        	liveVideoId: this.ruleForm.id
        }).then(res => {
        	this.ruleForm = res.data.data.liveVideo
        	this.ruleForm.productIds = res.data.data.productIds
        	this.multipleSelection1 = res.data.data.liveVideoProducts
        	this.value1.push(this.ruleForm.startTime);
        	this.value1.push(this.ruleForm.endTime);
        	this.ruleForm.yxkjdate = this.ruleForm.startTime + " - " + this.ruleForm.endTime
        })
      },
			back() {
				history.back();
			},
			reset() {
				this.listQuery.q_name1 = "";
				this.check();
			}
		}
	}
</script>
<style scoped>
	/deep/ [class*="el-col-"] {
	  float: none;
	}

	.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 100px;
	  height: 100px;
	  line-height: 100px;
	  text-align: center;
	}
	.avatar {
	  display: block;
	  height: 150px;
	}

	/deep/ .avatar-uploader .el-upload {
	  border: 1px dashed #d9d9d9;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	}
	/deep/ .avatar-uploader .el-upload:hover {
	  border-color: #409eff;
	}
</style>
